<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
    >
    </common-table>
    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '表格标题',
      attrs: {
        data: [
          //表格需要的数据
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          type: "expand", //多选框Attribute
        },
        {
          type: "selection", //多选框Attribute
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "address",
          label: "地址",
        },
        {
          prop: "date",
          label: "日期",
          sortable: true,
        },
      ],
      // 操作按钮
      controller: ["违规", "违规", "违规下架"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput", //组件名
        prop: "s1", //搜索字段名
        value: "", //可以为 字符串、数组、数值根据组件绑定的类型来配置
        formItemAttrs: {
          //el-form-item 需要传入的 Form-Item Attributes
          label: "搜索框",
        },
        inputAttrs: {
          //表单组件需要传入的对应的 Attributes
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "s2",
        value: "",
        formItemAttrs: {
          label: "搜索框",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 8,
        name: "CommonCascader",
        prop: "s3",
        value: [],
        options: [
          {
            value: "1",
            label: "一级",
            children: [
              {
                value: "1-1",
                label: "二级",
                children: [
                  {
                    value: "1-1-1",
                    label: "三级",
                  },
                  {
                    value: "1-1-2",
                    label: "三级",
                  },
                  {
                    value: "1-1-3",
                    label: "三级",
                  },
                ],
              },
              {
                value: "1-2",
                label: "二级",
              },
              {
                value: "1-3",
                label: "二级",
              },
            ],
          },
          {
            value: "2",
            label: "一级",
          },
          {
            value: "3",
            label: "一级",
          },
        ],
        formItemAttrs: {
          label: "级联选择器",
        },
        inputAttrs: {
          placeholder: "请选择",
          props: { expandTrigger: "hover" },
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "f2",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
